<template>
  <div class="tree overflow-hidden bg-white">
    <BasicTree title="数据分类" treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" :clickRowToExpand="false"
      :treeData="treeData" :fieldNames="{ key: 'treeId', title: 'classifyName', children: 'children' }"
      :selectedKeys="selectedKeys" @select="handleSelect" />
  </div>
</template>
<script lang="ts"
  setup>
  import { onMounted, ref } from 'vue';
  import { BasicTree, TreeItem } from '@/components/Tree'
  import { getClassifyTree } from '@/api/collection/classify';

  defineOptions({ name: 'DeptTree' });

  const emit = defineEmits(['select', 'mount']);

  const treeData = ref<TreeItem[]>([]);

  let selectedKeys = ref<string[]>([]);

  async function fetch() {
    const treeData1 = (await getClassifyTree({})) as unknown as TreeItem[];
    handleSelect([treeData1[0].classifyId]);
    treeData.value = treeData1
  }


  function handleSelect(keys) {
    if (keys.length === 0 || selectedKeys.value.includes(keys[0])) {
      // 如果节点已经选中，则阻止取消选中
      return
    }
    console.log(keys[0]);
    
    emit('select', keys[0]);
    selectedKeys.value = keys; // 更新选中节点
  }


  onMounted(() => {
    fetch();
  });
</script>
<style scoped
  lang="scss">
  .tree {
    flex-shrink: 0;
    margin-right: 8px;
  }
</style>
